<template>
  <div class="tail-box">
    <div class="context">{{place}}</div>
  </div>
</template>

<script>
export default {
  props: {
    place: {
      type: String,
      require: true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .tail-box
    width 64px
    line-height 32px
    background rgba(224,40,40,0);
    border 1px solid rgba(224, 40, 40, 1);
    border-radius 4px; 
    text-align center
    position relative
    z-index 100 
    &::before 
      border: solid transparent;
      content: ' ';
      height: 0;
      left: 100%;    
      position: absolute;
      width: 0;
    &::after
      border: solid transparent;
      content: ' ';
      height: 0;
      left: 100%;    
      position: absolute;
      width 0
    &::after 
      border-width 4px
      border-left-color rgba(250,248,248,1)
      top 50% 
      transform translateY(-50%)
      right -2px
    &::before 
      border-width 5px
      border-left-color rgba(224, 40, 40, 1)
      top 50%
      right -2px
      transform translateY(-50%)
    .context
      font-weight bold
      color rgba(224,40,40,1)
  
</style>